<template>
	<view class="videoList">
		<view class="swiper-box">
			<swiper class="swiper" :vertical="true" :current="current" @change="change">
				<swiper-item v-for="(item,index) in list" :key="item.id">
					<view class="swiper-item">
						<video-player ref="player" :autoplay="index==current&& list.length>0" :address="item.src"></video-player>
						<view class="left-box">
							<list-left :item="item"></list-left>
						</view>
						<view class="right-box">
							<list-right :item="item"  @open="openComment" ref="right"></list-right>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view v-show="show" class="comment-box">
			<comment @close="close"></comment>
		</view>
	</view>
</template>

<script>
	import videoPlayer from './videoPlayer.vue'
	import listLeft from './listLeft.vue'
	import listRight from './listRight.vue'
	import comment from './comment.vue'
	export default {
		props: {
			"list": {
				type: Array,
				default: []
			}
		},
		components: {
			videoPlayer,
			listLeft,
			listRight,
			comment
		},
		data() {
			return {
				current: 0,
				show:false
			};
		},
		methods: {
			change(res) {
				let current = res.detail.current
				this.$refs.player[this.current].pause() // 关闭之前的
				this.$refs.player[current].player() // 播放现在的
				this.current = current
			},
			openComment() {
				if (this.show === false) {
					this.show = true
				}
			},
			close() {
				if (this.show === true) {
					this.show = false
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.videoList{
		padding-top: 50px;
	}
	.videoList,
	.swiper-box,
	.swiper,
	.swiper-item {
		height: 100%;
		width: 100%;
		z-index: 19;
		background-color: #000000;
	}

	.swiper-box {}

	.swiper {}

	.swiper-item {
		.left-box {
			z-index: 20;
			position: absolute;
			bottom: 80px;
			left: 10px;
		}

		.right-box {
			z-index: 20;
			position: absolute;
			bottom: 80px;
			right: 10px;
		}
	}

	.comment-box {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 22;
		height: 500px;
		width: 100%;
	}
</style>
